/**
 * Created by fangshufeng on 2017/8/30.
 */

import React , {Component} from 'react';

import {
    View,
    Text,
    StyleSheet,
    TabBarIOS
} from 'react-native'

import BlueTab from './BlueTab';

let base64Icon = 'data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR\
7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3\
btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVud\
rG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91\
Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE\
+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SK\
zLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6Dbldcom\
adViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09B\
gYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwr\
Ma+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLO\
cy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40w\
Kv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZaz\
im+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjE\
QOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6z\
fyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSv\
uFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA\
9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzje\
MprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnD\
VeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnE\
Z3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLar\
Yv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1ves\
dHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

function _renderContent (color: string, pageText: string, num?: number) {
    return (
        <View style={[styles.tabContent, {backgroundColor: color}]}>
            <Text style={styles.tabText}>{pageText}</Text>
            <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
        </View>
    );
}

export  default class  MainManage extends  Component {

     constructor(props) {
         super(props);
         this.state={
             selectedTab: 'redTab',
             notifCount: 0,
             presses: 0,
         };

     }
    render(){
        return (
            <TabBarIOS
                unselectedTintColor="yellow"
                tintColor="white"
                barTintColor="darkslateblue">

                <TabBarIOS.Item
                    title="Blue Tab"
                    icon={{uri: base64Icon, scale: 3}}
                    selected={this.state.selectedTab === 'blueTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'blueTab',
                        });
                    }}>
                    {_renderContent('#414A8C', 'Blue Tab')}
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    systemIcon="history"
                    badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
                    selected={this.state.selectedTab === 'redTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'redTab',
                            notifCount: this.state.notifCount + 1,
                        });
                    }}>
                    {/*{_renderContent('#783E33', 'Red Tab', this.state.notifCount)}*/}
                    <BlueTab
                        color="red"
                        pageText='Red Tab'
                        // num=4
                    />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    icon={require('./TabBarItem_nor_2@2x.png')}
                    selectedIcon={require('./TabBarItem_nor_1@2x.png')}
                    // renderAsOriginal
                    title="More"
                    selected={this.state.selectedTab === 'greenTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'greenTab',
                            presses: this.state.presses + 1
                        });
                    }}>
                    {_renderContent('#21551C', 'Green Tab', this.state.presses)}
                </TabBarIOS.Item>

            </TabBarIOS>
        );
    };

}

const styles = StyleSheet.create({
    tabContent: {
        flex: 1,
        alignItems: 'center',
    },
    tabText: {
        color: 'white',
        margin: 50,
    },
});

